<template>
  <div class="search-suggestion">
    <van-cell
      icon="search"
      v-for="(item, index) in suggestions"
      :key="index"
      @click="$emit('search', item)"
    >
      <!-- v-html指令可以渲染html标签，用来处理高亮 -->
      <span slot="title" v-html="highlight(item)"></span>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestions } from '@/api/search.js'

// 按需加载lodash库中函数节流debounce方法
import { debounce } from 'lodash'
/**
 * 函数节流：指的是函数在一定时间内不再调用
 * 这里实现的功能：用户输入数据，停止输入数据200毫秒后，才会发起请求。
 */

export default {
  name: 'SearchSuggestion',
  data() {
    return {
      suggestions: [] // 联想关键字数据列表
    }
  },
  methods: {
    async loadSearchSuggestions(q) {
      try {
        const { data } = await getSearchSuggestions(q)
        this.suggestions = data.data.options
      } catch (error) {
        console.log(error)
        this.$toast('联想建议获取失败，请稍后重试')
      }
    },
    // 处理输入字符串高亮
    highlight(item) {
      const highlightStr = `<span class="active">${this.searchText}</span>`
      /**
       * 正则表达式RegExp构造函数
       * 参数一：正则表达式 this.searchText相当于/this.searchText/，
       * 但是正常的正则表达式不支持这样，所以使用RegExp构造函数
       * 参数二：可选，g--全局匹配，i--不区分大小写
       */
      const reg = new RegExp(this.searchText, 'gi')
      /**
       * 字符串replace方法
       * 参数一：要替换的字符串内容
       * 参数二：替换后的内容
       */
      return item.replace(reg, highlightStr)
    }
  },
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  watch: {
    // 监听预定义数据searchText的变化
    searchText: {
      /**
       * lodash库debounce方法
       * 参数一：函数
       * 参数二：延迟毫秒
       * 返回值：防抖之后的函数
       * */
      handler: debounce(function(value) {
        this.loadSearchSuggestions(value) // 调用请求方法，并传入用户输入最新的参数
      }, 200),
      immediate: true // 该回调将会在侦听开始之后被立即调用
    }
  }
}
</script>

<style lang="less" scoped>
.search-suggestion {
  // 文字高亮
  /deep/.active {
    color: #3296fa;
  }
}
</style>
